<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/mobile-header.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN" manifest="/misc/wei_cache_new.manifest">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<title>${microProductCategorie.name }</title>
<link rel="stylesheet" type="text/css" href="${ctxStatic }/shopping/singlePage/productDetail/css/list.css" />
<link rel="stylesheet" type="text/css" href="${ctxStatic }/shopping/singlePage/productDetail/css/xiangq.css" />
<link rel="stylesheet" type="text/css"
	href="${ctxStatic}/site/themes/FangChanMuBan/font-awesome.css"
	media="all">
<link href="http://weixin.zhaotang.net/zt/static/site/themes/QiCheFuWu/common.css" media="all" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/jquery/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function onBridgeReady(){
	 WeixinJSBridge.call('hideOptionMenu');
	}

	if (typeof WeixinJSBridge == "undefined"){
	    if( document.addEventListener ){
	        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
	    }else if (document.attachEvent){
	        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
	        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
	    }
	}else{
	    onBridgeReady();
	}

function createPay(){
	checkCount(${product.amount});
	var num=$("#pNum").val();
	 
	window.location.href='${ctxFront }/site/shopping/createPay?uid=${uid}&wechatId=${wechatId}&productId=${product.id}&productNumber='+num;
}


function add(maxCount){
	
	var count=parseInt($("#pNum").val());
	console.log(maxCount);
	if(count<parseInt(maxCount)){
		$("#pNum").val(count+1);
	}else{
		$("#pNum").val(maxCount);
	}
}

function subtract(){
	var count=parseInt($("#pNum").val());
	if(count>1){
		$("#pNum").val(count-1);
	}else{
		$("#pNum").val(1);
	}
}

function checkCount(maxCount){
	var count=parseInt($("#pNum").val());
	var r =  /^[1-9]\d*$/;
	if(count<=0){
		$("#pNum").val(1);
	}
	if(count>parseInt(maxCount)){
		$("#pNum").val(maxCount);
	}
	if(!r.test($("#pNum").val())){
		$("#pNum").val(1);
	}
	
}

</script>
<style type="text/css">


.w-header {
    background: none repeat scroll 0 0 #e4393c;
    height: 44px;
    width: 100%;
}

.w-header .arrow-wrap {
    float: left;
    height: 100%;
    padding: 0 20px;
    width: 15px;
}
a {
    text-decoration: none;
}

.w-header .arrow-wrap .arrow-left {
color:#fff;
    display: block;
    height: 13px;
    margin-top: 8px;
font-size:26px;font-weight:bold;
    width: 13px;
}

.w-header .text {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 44px;
    margin: 0 100px;
    text-align: center;
}

.w-header .home {
   
    float: right;
    height: 100%;
    width: 37px;
}
</style>
</head>
<body style="background:#fff;">
<div class="w640">
<c:if test="${project.isShopping eq 0 }">
			<div class="w-header">
				<a class="arrow-wrap" mon="content=back" href="javascript:history.back()" >
				<span class="arrow-left icon-chevron-left">  </span>
				</a>
				<a class="home" href="${ctxFront }/site/shopping/toUserCentre?uid=${uid }&wechatId=${wechatId}" >
				 <img src="/zxims/static/site/themes/FangChanMuBan/images/hy.png" style="width:75%;margin-top:7px;">
				</a>
				<div class="text">商品详情</div>
			</div>
	</c:if>
  <div class="inner"  style="padding:0px;" >
  <input id=""  type="hidden"   value="${product.amount }" >
  
  <section class="news_article"  style="padding:0px;" >
  		<c:if test="${ fn:length(product.microProductImg)>0 }">
			<div style="-webkit-transform:translate3d(0,0,0);">
				<div class="box_swipe" id="banner_box" style="visibility: visible;">
					<ul class="m_slide">
						<c:forEach items="${product.microProductImg }"		var="microProductImg">
						<li>
							<a onclick="${ctxMobileSite }/viewImgs/${product.id}"> <img alt="" src="${ctxUser}/product/${microProductImg.img }" style="width:100%;padding:0px;" /> </a></li>
						</c:forEach>
					</ul>
					<ol>
					<c:forEach items="${product.microProductImg }"		var="microProductImg"  varStatus="var" >
						<li  ${var.index eq 0?'class="on"':'' } >
							&nbsp;</li>
							</c:forEach>
					</ol>
				</div>
			</div>
			</c:if>
			</section>
  </div>  
<div class="buy_area">
    <div class="fn_wrap">
        <h1 class="fn" style="margin-top:20px;"  >${product.name }</h1>
        <div class="desc">${fn:substring(product.title, 0, 75) }</div>
    </div>

    <div class="price_wrap">
        <span class="tit">价格：</span>
        <span class="price">¥${product.price/100 }</span>
    </div>


    <div class="color_wrap">
        <div class="sku_wrap"> 
        <!-- 
            <div>
              <div class="sku" id="sku1" ptag="7001.1.5">
                <h3>颜色</h3>
                <div class="sku_list">
                  <span class="option">含羞草</span>
                  <span class="option">荷塘月色</span>
                  <span class="option">花香醉人</span>
                  <span class="option">华庭爱语</span>
                  <span class="option">纪梵希</span>
                  <span class="option">恋恋格</span>
                  <span class="option">美甲</span>
                  <span class="option">美仑美奂</span>
                  <span class="option">叶语深情</span>
                  <span class="option">异国风尚</span>
                  <span class="option">悠然之雅</span>
                  <span class="option">月亮之上</span>
                  <span class="option">醉美风情</span>
                  <span class="option option_selected">心语心愿</span>
                  <span class="option">爱的港湾</span>
                  <span class="option">爱玛仕</span>
                  <span class="option">翠羽丹霞</span>
                </div>
              </div>
              <div class="sku">
                <h3>尺寸</h3>
                <div class="sku_list">
                  <span class="option">1.5米</span>
                  <span class="option">1.8米</span>
                  <span class="option option_selected">2.0米</span>
                </div>
              </div>
            </div>
               -->    
            <div class="sku sku_num">
                <h3>数量</h3>
                <div class="num_wrap">
                    <span class="minus minus_disabled" onclick="subtract()" >-</span>
                    <input id="pNum" class="num" type="tel" value="1" style="height:40px;width:40px;"  onblur="checkCount(${product.amount})"  >
                    <span class="plus" onclick="add(${product.amount})" >+</span>
                    <p style="line-height:50px;font-size:12px;" >(库存数量：${product.amount })</p>
                </div>
           </div>
             
           <div class="xiangq">商品详情<i class="icon_promote"></i></div>
           <div class="xcontent">  
           <div id="img-content">
           ${product.description }
           </div>
           </div>
           
        </div>
    </div>
        
</div>

</div>
<div style="height:56px;"></div>
<div class="btn_wrap btn_wrap_fixed">
    <div class="btn_col">
    <c:if test="${project.isShopping eq 1 }"> <a class="btn btn_buy" href="javascript:alert('订购热线:${project.mobile }');" style="margin-left:10px;width:98%;">立即订购</a></c:if>
    <c:if test="${project.isShopping eq 0 }">  <a class="btn btn_buy" href="javascript:createPay();" style="margin-left:10px;width:98%;">立即购买</a></c:if>
   
      
    </div>
</div>

</body>
</html>
	<link href="http://weixin.zhaotang.net/zt/static/site/themes/QiCheFuWu/common.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctxStatic }/site/themes/QiCheFuWu/swipe.js"></script>
	<script type="text/javascript">
	
	$(function(){
        new Swipe(document.getElementById('banner_box'), {
            speed:500,
            auto:3000,
            callback: function(){
                var lis = $(this.element).next("ol").children();
                lis.removeClass("on").eq(this.index).addClass("on");
            }
        });
    });
	
	
    try {

        window.onunload = stay; 
        window.onload = function(){
            autoSize();
            slider_size();
        }

        pageOpen = new Date();//定义一个新的日期对象，记录开始浏览页面时间。  
        function stay() {//定义一个函数。  
            pageClose = new Date();//定义一个新的日期对象，记录结束浏览页面时间。  
            minutes = (pageClose.getMinutes() - pageOpen.getMinutes()); //“分钟”变量等于结束时间的分钟数减去开始时间的分钟数。  
            seconds = (pageClose.getSeconds() - pageOpen.getSeconds());//“秒数”变量等于结束时间的秒数数减去开始时间的秒数数。  
            time = (seconds + (minutes * 60));//时间变量等于“秒数”变量加上“分钟”变量乘以60，即变为以秒记
            send_time(time);
            return time;
        }
        function send_time(time){
            var media_ad_id = '116077';
            var action = 'mshow';

            var url = '/MediaApp/send_duration';
            url = url+'?media_ad_id='+media_ad_id+'&action='+action+'&duration='+time;
            var i = new Image(1,1); 
            i.src= url;
        }

        function autoSize(){
            $("img,iframe,embed").each(function(){
                if($(this).width() > $(this).parent().width() || $(this).width() > $(window).width()){
                    $(this).css('max-width',"100%");
                }
            });
            $("iframe").each(function(){
                var _width = $(this).width();
                if(_width){
                    $(this).css('height',_width);
                }
            })
        }

        // 图片跳转放大
                        $(".ui-content img").click(function(){
                    if(!$(this).parent().attr('href')){
                        window.location.href = $(this).attr('src');
                    }
                });

        //约束轮播图片的比例
        function slider_size(){
            var slider_height = 0;
            slider_height = $(".slider .switchable-box").width()*0.75;
            $(".slider .switchable-box").height(slider_height);
            $(".slider .switchable-content img").height(slider_height); 
        }

    }catch (e) {

    }

    

</script>

<c:if test="${microPage.openAlbum eq '1' }">
<script>window.moon_map = {"biz_common/utils/url/parse.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/utils/url/parse20910f.js","biz_common/utils/report.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/utils/report20910f.js","biz_common/dom/class.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/dom/class20910f.js","a/ios.js":"/mmbizwap/zh_CN/htmledition/js/a/ios209d4a.js","a/android.js":"/mmbizwap/zh_CN/htmledition/js/a/android209d4a.js","a/profile.js":"/mmbizwap/zh_CN/htmledition/js/a/profile209d4a.js","biz_common/utils/cookie.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/utils/cookie20910f.js","biz_wap/utils/ajax.js":"/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/ajax20910f.js","biz_common/utils/string/html.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/utils/string/html20910f.js","biz_common/dom/attr.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/dom/attr20910f.js","appmsg/report.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/report20910f.js","appmsg/like.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/like20910f.js","appmsg/a.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/a209d4a.js","appmsg/report_and_source.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/report_and_source20910f.js","appmsg/share.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/share20910f.js","appmsg/cdn_speed_report.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/cdn_speed_report209d4a.js","appmsg/iframe.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/iframe20910f.js","appmsg/page_pos.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/page_pos20910f.js","appmsg/review_image.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/review_image20910f.js","appmsg/outer_link.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/outer_link20910f.js","biz_wap/ui/lazyload_img.js":"/mmbizwap/zh_CN/htmledition/js/biz_wap/ui/lazyload_img209d4a.js","biz_wap/jsapi/core.js":"/mmbizwap/zh_CN/htmledition/js/biz_wap/jsapi/core20910f.js","biz_wap/utils/mmversion.js":"/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/mmversion20910f.js","biz_common/dom/event.js":"/mmbizwap/zh_CN/htmledition/js/biz_common/dom/event20910f.js","appmsg/index.js":"/mmbizwap/zh_CN/htmledition/js/appmsg/index209d4a.js"};</script><script type="text/javascript" src="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/moon20910f.js"></script><script type="text/javascript">
      var tid = "";
      var aid = "";
      var biz = "MjM5MzAyMjU3OA==";
      var mid = "201619276";
      var idx = "1";
      var appuin = "MjM5MzAyMjU3OA==";

      //下边这两个值为什么调转过来呢？是因为要跟推广页的字段保持一致。。坑爹
      var source = "";
      var scene = 75;
      
      var itemidx = "";
      var nickname = "万客乐连锁超市";
      var user_name = "gh_bf04258dd6c2";
      var fakeid   = "";
      var version   = "";
      var is_limit_user   = "0";
      var msg_title = "国庆节感恩回馈，百余商品超值惊爆！2014年9.27日-10.8日.";
      var msg_desc = "超值大换购购物满68元加5元换价值9.8元华旗三连包抽纸或鹿皮檫车布一块。购物满128元加10元换价值21.";
      var msg_cdn_url = "http://mmbiz.qpic.cn/mmbiz/g61YukPAFI1T7xHQhnkmhS2xH8pppVYhhpglm11KxOmJKheAX4lKTch2ibINLF6HINRCMic6uusYpdic2vNF3uANA/0";
      var msg_link = "http://mp.weixin.qq.com/s?__biz=MjM5MzAyMjU3OA==&amp;mid=201619276&amp;idx=1&amp;sn=7a1fd02cf6da74ddc73dcb665066c21e#rd";
      var msg_source_url = '';
      var networkType;
      var appmsgid = '' || '201619276';
            var readNum = 1;
              
      var likeNum = '赞';
            seajs.use("appmsg/index.js");
  </script>

</c:if>
